<template>
	<!--修改密码模态框-->
	<vxe-modal
		id='userModifyPasswordModal'
		v-bind='modalConfig' @close='closeModal'>
		<template v-slot:title>
			{{ modalConfig['title'] }}
		</template>
		<n-form ref='formRef' v-bind='formConfig' :model='formData'>
			<n-grid :y-gap='24' :cols='1'>
				<n-grid-item>
					<n-form-item label='旧密码' path='oldPassword'>
						<n-input
							v-model:value='formData["oldPassword"]'
							type='password' show-password-on='click' clearable/>
					</n-form-item>
				</n-grid-item>
				<n-grid-item>
					<n-form-item label='新密码' path='newPassword'>
						<n-input
							v-model:value='formData["newPassword"]'
							type='password' show-password-on='click' clearable/>
					</n-form-item>
				</n-grid-item>
				<n-grid-item>
					<n-form-item label='确认新密码' path='rePassword'>
						<n-input
							v-model:value='formData["rePassword"]'
							type='password' show-password-on='click' clearable/>
					</n-form-item>
				</n-grid-item>
				<n-grid-item>
					<n-flex justify='center'>
						<n-button round strong :bordered='false'
								  type='info' @click='submitEvent'>
							提交修改
						</n-button>
					</n-flex>
				</n-grid-item>
			</n-grid>
		</n-form>
	</vxe-modal>
</template>
<script lang='ts' setup>
import { nextTick, reactive, ref } from 'vue';
import axios from '@/config/axios/index.ts';
import { useRouter } from 'vue-router';
// import '@/config/vxe-table/config.ts';
import { VxeUI, VxeModal } from '@/config/vxe/index.ts';
import { FormInst, FormProps, FormRules, FormItemRule } from 'naive-ui';
import { useCommonStore } from '@/config/pinia/common.store.ts';
import type { JsonResultProps } from '#/JsonResult.d.ts';
import { loginPath } from '@/config/config.ts';
const commonStore = useCommonStore();
const router = useRouter();
// 用户密码修改模态框配置
const modalConfig = reactive({
	modelValue : false,
	title      : '',
	width      : '',
	height     : '',
	showClose  : true
});
const formConfig = reactive<FormProps>({
	disabled             : false,
	inline               : false,
	labelWidth           : 'auto',
	labelAlign           : 'left',
	labelPlacement       : 'left',
	showFeedback         : true,
	showLabel            : true,
	showRequireMark      : true,
	requireMarkPlacement : 'left',
	size                 : 'medium',
	validateMessages     : undefined,
	// 表单校验规则
	rules : reactive<FormRules>({
		oldPassword : {
			required : true,
			trigger  : ['input', 'blur'],
			message  : '请输入旧密码'
		},
		newPassword : {
			required : true,
			trigger  : ['input', 'blur'],
			asyncValidator(rule: FormItemRule, value: string, callback: (error?: Error) => void) {
				const passwordReg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[1-9])(?=.*[^a-zA-Z0-9]).{8,20}$/;
				return new Promise<void>((resolve, reject) => {
					if (!value) {
						reject(Error('请输入新密码'));
					}
					if (8 > value.length || 20 < value.length) {
						reject(Error('密码长度为8-20位'));
					}
					if (!passwordReg.test(value)) {
						// 新密码不符合规定
						reject(Error('密码必须包含数字、大小写字母、特殊字符'));
					}
					if (formData['oldPassword'] === value) {
						// 判断新旧密码是否一致
						reject(Error('新密码不能与旧密码一致,请重新输入'));
					}
					resolve();
				});
			}
		},
		rePassword  : {
			required : true,
			trigger  : ['input', 'blur'],
			asyncValidator(rule: FormItemRule, value: string, callback: (error?: Error) => void) {
				return new Promise<void>((resolve, reject) => {
					if (!value) {
						reject(Error('请再输入一遍新密码'));
					}
					// 判断新密码与确认密码是否一致;
					if (!(value === formData['newPassword'])) {
						reject(Error('两次输入的新密码不一致'));
					}
					resolve();
				});
			}
		}
	})
});
// 表单绑定数据
const formData = reactive({
	oldPassword : null,
	newPassword : null,
	rePassword  : null,
	isForce     : false
});
const formRef = ref<FormInst>();
const showForceChangePasswordModal = () => {
	resetEvent();
	formData.isForce = true;
	Object.assign(modalConfig,
		{
			modelValue : true,
			height     : '380',
			width      : '500',
			title      : '强制修改密码',
			showClose  : false
		});
};
const showModal = () => {
	resetEvent();
	formData.isForce = false;
	Object.assign(modalConfig,
		{
			modelValue : true,
			height     : '380',
			width      : '500',
			title      : '修改密码',
			showClose  : true
		});
};
const closeModal = ({ type, $event }: { type: unknown, $event: unknown }) => {
	// TODO 清除校验状态
	formRef.value?.restoreValidation();
	modalConfig['modelValue'] = false;
};
const resetEvent = () => {
	Object.assign(formData, {
		// 旧密码
		oldPassword : null,
		// 新密码
		newPassword : null,
		// 确认新密码
		rePassword : null,
		// 是否强制
		isForce : false
	});
};
// 修改密码
const submitEvent = () => {
	// 表单校验
	formRef.value?.validate((errors) => {
		if (!errors) {
			axios<any, JsonResultProps<any>, any>({
				method : 'PATCH',
				url    : '/user/password',
				data   : formData
			}).then((jsonResult: JsonResultProps<any>) => {
				if (jsonResult['status']) {
					VxeUI.modal.message({ content : jsonResult['msg'], status : 'success', id : 'successMessage' });
					modalConfig['modelValue'] = false;
					// 用户修改密码成功
					// 退出,重新登录
					nextTick(() => {
						commonStore.emptyStore();
						router.push(loginPath);
					});
				} else {
					VxeUI.modal.message({ content : jsonResult['msg'], status : 'warning', id : 'modifyPSDFailed' });
				}
			}).catch((error: unknown) => {
				console.error(error);
				VxeUI.modal.message({ content : '系统异常,请稍后再试', status : 'error', id : 'errorMessage' });
			});
		}
	});
};
// 暴露方法
defineExpose({ showModal, showForceChangePasswordModal });
</script>